<template>
  <view class="current-device-section flex-col">
    <view class="device-header flex-row justify-start">
      <view class="name">{{deviceInfo.productName}}</view>
      <view class="change-device-button flex-row justify-center align-center" @click="onChangeDevice">
        <view class="change-icon"></view>
        <view class="change-device-text">更换</view>
      </view>
    </view>
    <view class="device-card flex-col">
      <view class="device-info flex-row justify-between">
        <view class="device-specs-container flex-col">
            <view class="price-amount">{{ deviceInfo.evaluatePrice || '0' }}.00</view>
            <view class="price-text">最高可得</view>
        </view>
        <view class="device-image-container flex-col justify-center align-items-center">
          <common-image
          :src="deviceInfo.productImage ? deviceInfo.productImage + '?x-oss-process=image/resize,m_fill,w_120' : ''"
          :styles="'width: 120rpx; height: 120rpx; display: block;mix-blend-mode: multiply;'" class="device-image"/>
          <view class="device-label flex-col">
            <text class="current-device-label">{{deviceInfo.fromText}}</text>
          </view>
        </view>
      </view>
      <image class="recycle-button-container" src="https://image.chushouya.com/uploads/file/1752056424240_a1u27a.png" mode="widthFix" @click="handleDevice"></image>
      <view class="device-tags">
        <text class="device-tag">提供备用机</text>
        <text class="device-tag">当日优先打款再回收</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CurrentDevice',
  props: {
    deviceInfo: {
      type: Object,
      default: () => ({
        model: '苹果Phone 13 Pro Max',
        price: '8000',
        image: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng462e8348ddeb5f4fe5f2e8d5583e663ff90e00856bfd9202c4c190a944c12a9e'
      })
    }
  },
  methods: {
    onChangeDevice() {
      this.$emit('change-device')
    },
    handleDevice() {
      this.$emit('handle-device')
    }
  }
}
</script>

<style scoped lang="scss">
.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.justify-between {
  justify-content: space-between;
}

.current-device-section {
  width: 100%;
  align-self: center;
  margin: 20rpx auto 0;
  background: url('https://image.chushouya.com/assets/images/home/product_bg.png') no-repeat center;
  background-size: 100% 100%;
}

.device-header {
  padding: 30rpx 32rpx 56rpx;
  .name {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 24rpx;
    color: #333333;
  }
}

.device-section-title {
  overflow-wrap: break-word;
  color: #333;
  font-size: 32rpx;
  font-weight: 600;
  text-align: left;
  line-height: 44rpx;
}

.change-device-button {
  align-items: center;
  width: 102rpx;
  height: 36rpx;
  background: rgba(255,255,255,0.5);
  border-radius: 20rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 22rpx;
  color: #FF9A00;
  margin-left: 12rpx;
}

.change-icon {
  width: 28rpx;
  height: 28rpx;
  margin-right: 2rpx;
  background: url(https://image.chushouya.com/assets/images/home/icon_change.png) no-repeat;
  background-size: 28rpx;
}

.change-device-text {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 22rpx;
  color: #FF9A00;
}

.device-card {
  padding: 0 32rpx 36rpx;
}

.device-info {
  width: 100%;
}

.device-image-container {
  position: relative;
  width: 132rpx;
  height: 132rpx;
  background: #FFFFFF;
  border-radius: 16rpx;
  border: 2rpx solid #FFF1CA;
}

.device-image {
  width: 120rpx;
  height: 120rpx;
}

.device-label {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 4rpx 8rpx;
  width: 88rpx;
  height: 36rpx;
  background: #343434;
  border-radius: 16rpx 0rpx 16rpx 0rpx;
  text-align: center;
}

.current-device-label {
  color: #FFFFFF;
  font-size: 22rpx;
  text-align: center;
  color: #FFD786;
}

.device-specs-container {
  flex: 1;
  justify-content: space-between;
}

.device-model {
  font-weight: 600;
  font-size: 30rpx;
  color: #333333;
}

.device-tags {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 22rpx;
  color: #C89300;
}

.device-tag {
  height: 48rpx;
  line-height: 48rpx;
  text-align: center;
  background: #FFF7E1;
  border-radius: 29rpx;
  padding: 0 20rpx;
  &+.device-tag {
	margin-left: 16rpx;
  }
}

.price-container {
  align-items: center;
  margin-top: 16rpx;
}

.price-value {
  display: flex;
  align-items: baseline;
}

.currency-symbol {
  overflow-wrap: break-word;
  color: #FF5F00;
  font-size: 24rpx;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 34rpx;
  margin-right: 2rpx;
}

.price-amount {
  overflow-wrap: break-word;
  font-family: Barlow, Barlow;
  font-weight: 600;
  font-size: 80rpx;
  color: #333333;
  line-height: 96rpx;
}

.recycle-button {
  background-color: rgba(255, 95, 0, 1);
  border-radius: 22rpx;
  height: 44rpx;
  padding: 0 16rpx;
  align-items: center;
}

.arrow-right-icon {
  width: 24rpx;
  height: 24rpx;
  margin-left: 4rpx;
}
.price-text {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #999999;
  line-height: 34rpx;
  margin-top: 8rpx;
}
.recycle-button-container {
  width: 100%;
  margin-top: 42rpx;
  margin-bottom: 24rpx;
  animation: jumpAnimation 1.1s infinite ease-in-out;
}

@keyframes jumpAnimation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
</style>
